<template>
  <div class="loginBox">
    <div class="textBox">
      <span id="changePW">设置新密码</span><br />
      <span id="explain">初次登录请设置新密码，原密码为您的初始密码。</span>

    </div>
    <div class="password">
      <inputs>
        <span
          class="lb"
          slot="label"
        >原密码</span>
        <el-input
          @blur="oldVerify"
          slot="frame"
          placeholder="请输入您的原密码"
          v-model="oldpassword"
          label="act"
          type="password"
          show-password
          :validate-event='oldPwStatus'
          maxlength=18
          minlength=6
        >
        </el-input>
      </inputs>
      <inputs>
        <span
          class="lb"
          slot="label"
        >新密码</span>
        <el-input
          @blur="newPwVerify"
          slot="frame"
          placeholder="请输入您的新密码"
          v-model="newpassword"
          label="act"
          type="password"
          show-password
          maxlength=18
          minlength=6
        >
        </el-input>
      </inputs>
      <inputs>
        <span
          class="lb"
          slot="label"
        >确认密码</span>
        <el-input
          @blur="againVerify"
          @keyup.native.enter="submitpassword"
          class="again"
          slot="frame"
          placeholder="请再次输入您的新密码"
          v-model="againpassword"
          label="act"
          type="password"
          show-password
          maxlength=18
          minlength=6
        >
        </el-input>
      </inputs>
      <buttons>
        <el-button
          @click.stop="submitpassword"
          slot="buttons"
          type="primary"
          size="medium"
        >修 改 密 码</el-button>
      </buttons>
    </div>
    <div class="logoBox">
      <img
        src="@/assets/logo/tellgen-logo.png"
        alt=""
      >
    </div>
  </div>
</template>

<script>
import { alterPW } from "@/request/api.js";
import md5 from 'js-md5';
import inputs from "@/components/baseCpn/inputs.vue";
import buttons from "@/components/baseCpn/buttons.vue";
export default {
  components: {
    inputs,
    buttons
  },
  data() {
    return {
      oldpassword: "",
      newpassword: "",
      againpassword: "",
      oldpw: "123456",
      newpw: "111222",
      againpw: "111222",
      pwContent: "",
      account: "",
      pw: "密码",
      act: "账号",
      oldPwStatus: true
    };
  },
  methods: {
    submitpassword() {
      if (
        this.oldpassword === "" ||
        this.newpassword === "" ||
        this.againpassword === ""
      ) {
        this.$message.error({
          message: "输入密码不能为空！"
        });
      } else if (this.newpassword !== this.againpassword) {
        this.$message.error({
          message: "两次输入密码不相同,请重新输入！"
        });
      } else {
        console.log('修改密码MD5',md5(this.$route.params.users+this.againpassword));
        console.log('路由传值为',this.$route.params.users);
        // 请求修改密码接口
        alterPW({
          userName: this.$route.params.users,
          pwd:md5(this.$route.params.users+this.againpassword)
        })
          .then(res => {
            console.log("修改密码接口调用成功", res.data.success);
          })
          .catch(err => {
            console.log("修改密码接口调用失败", err);
          });
        this.$router.push("/tellgen");
      }
    },
    oldVerify() {
      if (this.oldpassword !== this.oldpw) {
        this.$message.error({
          message: "输入原密码错误，请检查！",
          duration: 4000
        });
      } else if (!/^.{6,18}$/.test(this.oldpassword)) {
        this.$message.error({
          message: "密码长度应该在6~18位之间！"
        });
      }
    },
    newPwVerify() {
      if (!/^.{6,18}$/.test(this.newpassword)) {
        this.$message.error({
          message: "密码长度应该在6~18位之间！"
        });
      }
    },
    againVerify() {
      if (this.againpassword !== this.newpassword) {
        this.$message.error({
          message: "两次输入的新密码不相同！"
        });
      } else if (!/^.{6,18}$/.test(this.newpassword)) {
        this.$message.error({
          message: "密码长度应该在6~18位之间！"
        });
      }
    }
  }
};
</script>

<style lang="less">
.loginBox {
  width: 45rem;
  height: 53.6rem;
  background-color: rgba(255, 255, 255, 0.66);
  position: absolute;
  top: 26rem;
  left: 15.2rem;
  border-bottom-left-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;
  border-top: 0.6rem solid #ea6b48;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  text-align: center;
  .textBox {
    width: 100%;
    height: 15rem;
    color: #333333;
    text-align: center;
    padding-top: 6rem;
    box-sizing: border-box;
    #explain {
      font-size: 1.2rem;
      line-height: 3.6rem;
    }
    #changePW {
      font-size: 2.4rem;
      color: #191931;
      font-weight: 600;
    }
  }
  .password {
    width: 100%;
    height: 32rem;
    .again .el-input__inner {
      padding-left: 8.8rem;
      // box-sizing: content-box;
    }
  }
}
.logoBox {
  width: 100%;
  height: 7rem;
  img {
    text-align: center;
    line-height: 7rem;
    width: 16rem;
    height: auto;
  }
}
</style>